<template>
  <el-row :gutter="20" class="m-t-5px">
    <!-- 注意：如果不进行操作数组，使用index当key没有问题，若是数组会用来增删改查则不能使用index当key。 -->
    <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="24" v-for="(item, index) in cardList" :key="index + new Date().getTime()">
      <el-card class="rounded-md dark:bg-black m-5px" shadow="hover">
        <div class="flex justify-between">
          <span class="text-sm">{{ item.title1 }}</span>
        </div>
        <div class="text-2xl">
          <CountTo :startVal="0" :endVal="item.value1" :duration="2000"></CountTo>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
// @ts-ignore
import { CountTo } from "vue3-count-to";
import { reactive } from "vue";

const cardList = reactive([
  { title1: "新增分销商数", unit: "月", value1: 6600 },
  { title1: "新增分销商数", unit: "周", value1: 6600 },
  { title1: "新增分销商数", unit: "日", value1: 6600 },
  { title1: "累计佣金(元)", unit: "月", value1: 6600 },
  { title1: "提现待审核（元）", unit: "月", value1: 6600 },
  { title1: "提现佣金（元）", unit: "月", value1: 6600 },
  { title1: "订单金额（元）", unit: "月", value1: 6600 },
]);
</script>
